import Taro, {Component, Config} from '@tarojs/taro'
import {View, Image, Textarea} from '@tarojs/components'

import {SDBody} from 'sudao-ui'

import SDButton from '../../../comps/sd-button'

import './index.less'

import CheckNorIcon from '../../../images/ic_check_nor.png'
import CheckPreIcon from '../../../images/ic_check_pre.png'

type PageState = {
  currentMenuIndex: number,
  currentCount: number
}

export default class FeedBackPage extends Component<{}, PageState> {

  config: Config = {
    navigationBarTitleText: '意见反馈'
  }

  constructor () {
    super(...arguments)
    this.state = {
      currentMenuIndex: 0,
      currentCount: 0
    }
  }

  render () {
    const { statusBarHeight, platform } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0

    const { currentMenuIndex, currentCount } = this.state

    return (
      <SDBody sd-class='container'>
        <View className="main-content">
          <View className="section-header border-bottom_1px">
            <View className="menu-item" onClick={this.switchMenuBarIndex.bind(this, 0)}>
              <Image className="icon" src={currentMenuIndex == 0 ? CheckPreIcon : CheckNorIcon}></Image>
              <View className="title">意见</View>
            </View>
            <View className="menu-item" onClick={this.switchMenuBarIndex.bind(this, 1)}>
              <Image className="icon" src={currentMenuIndex == 1 ? CheckPreIcon : CheckNorIcon}></Image>
              <View className="title">反馈</View>
            </View>
          </View>

          <View className="main-pannel border-bottom_1px">
            {
              // @ts-ignore
              <Textarea className={`input-text ${platform.toLowerCase().indexOf('ios') < 0 ? '' : 'input-text_ios'}`}
                        maxlength={500}
                        placeholder='请填写反馈内容（最多500字）'
                        placeholderStyle='color:#999;'
                        onInput={this.onInputValueChange} />
            }
            <View className="tips-content">
              <View className="tips-title">{currentCount}/500</View>
            </View>

          </View>
        </View>

        <View style='height:118rpx;'></View>
        <View className="fixed-bottom border-top_1px">
          <View className="bottom-bar">
            <SDButton height={96} sd-class='btn-payment' onClick={this.doSubmit}>提交</SDButton>
          </View>
          <View style={`height: ${bottomH}px;`}></View>
        </View>
      </SDBody>
    )
  }

  switchMenuBarIndex = (index: number) => {
    if (this.state.currentMenuIndex == index) {return}
    this.setState({
      currentMenuIndex: index
    })
  }

  onInputValueChange = e => {
    let count = (e.detail.value || '').length
    this.setState({
      currentCount: count
    })
  }

  doSubmit = () => {

  }
}
